<template>
  <div class="allRemark">
    <div class="addContent">
      <p>
        <span class="LoginTip" v-if="!isLogin" @click="GoLogin">请登录</span>
      </p>
      <Textarea
        :disabled="!isLogin"
        placeholder="欢迎交流..."
        height="100px"
        @focus="addBorder"
        @blur="delBorder"
        v-model="newRemark"
      ></Textarea>
      <div class="submitBox">
        <Button class="submitRemark" @click="addRemark">添加</Button>
      </div>
    </div>
    <div v-if="ifContent">
      <remark-item
        v-for="item in remarkContent"
        :key="item.id"
        :content="item.content"
        :goodNum="item.goodNum"
        :time="parseInt(item.time)"
        :username="item.realname"
        :id="item.id"
        :CurrImg="item.avatar"
      ></remark-item>
    </div>
    <div class="noremark" v-if="!ifContent">没有评论</div>
  </div>
</template>

<script setup lang="ts">
import remarkItem from './remarkItem.vue'
import Bus from '../../bus'
import Textarea from '@/components/Textarea/index.vue'
import Message from '@/components/msg/msg'
import Button from '@/components/button.vue'
import { useRouter, useRoute } from 'vue-router'
import { ref, computed, onMounted, onBeforeUnmount, defineExpose } from 'vue'
import { useUserStore } from '@/store'
import $axios from '@/http'

const $router = useRouter()
const $route = useRoute()
const $store = useUserStore()
const showMsg = ref<boolean>(false)
const remarkContent = ref<Array<any>>([])
const ifContent = ref<boolean>(true)
const isBorder = ref<boolean>(false)
const newRemark = ref<string>('')
const flag = ref<boolean>(true)
const isLogin = computed(() => {
  return $store.isToken
})
onMounted(() => {
  getAllRemark()
  Bus.$on('finishChange', (msg: string) => {
    if (msg === 'success') {
      getAllRemark()
    }
  })
})
//const delRemark = (status) => {
//   showMsg = true;
//   msgWay = status;
//   setTimeout(() => {
//     showMsg = false;
//   }, 2000);
//   status == "success" ? (text = "删除成功") : (text = "删除失败");
//   getAllRemark();
// },
const GoLogin = () => {
  $router.push('/login')
}
const addBorder = () => {
  isBorder.value = true
}
const delBorder = () => {
  isBorder.value = false
}
//获取全部评论
const getAllRemark = () => {
  $axios
    .get('/comment/search', {
      params: {
        blogId: $route.params.id
      }
    })
    .then((res) => {
      console.log(res)
      if (res.data.error === -1) {
        ifContent.value = true
        remarkContent.value = res.data.data
      } else if (res.data.error === 0) {
        ifContent.value = false
      }
    })
}
// const restartSearch = (data: boolean) => {
//   if (data === false) {
//     ifContent.value = false
//   } else {
//     ifContent.value = true
//     remarkContent.value = data
//   }
// }

const addRemark = () => {
  if (newRemark.value !== '') {
    const id: string = typeof $route.params.id === 'string' ? $route.params.id : ''
    const blogId = parseInt(id)
    $axios
      .post('/comment/add', {
        username: $store.user.username,
        content: newRemark.value,
        blogId
      })
      .then((res) => {
        if (res.data.error === -1) {
          Message.success('评论成功')
          newRemark.value = ''
          getAllRemark()
        } else {
          Message.error('评论失败')
        }
      })
  }
}
onBeforeUnmount(() => {
  Bus.$off('finishChange')
})
</script>

<style lang="scss" scoped>
@import '../../css/pc/remark.scss';
// @import "../../css/mobile/mvremark.scss";

.noremark {
  margin-left: 15px;
}
</style>
